import { createContext, useReducer } from "react"
import ReducerOne from "./ReducerOne"
import ReducerTwo from "./ReducerTwo"
import "../../common/common.css"

//1.全局数据
// let num = 1
let obj = {
  num: 1,
  arr: [9,21]
}
//2.全局修改数据
function reducer(state, action) {
  const { type, payload } = action
  switch (type) {
    case 'add':
      return {
        num: state.num + 1
      }
    case 'del':
      return {
        num: state.num - 1
      }
    case 'changeNum':
      return {
        num: payload.num
      }
    case 'changeArray':
      return {
        arr: [...payload]
      }
    default:
      return state
  }
}
export const Context = createContext()
export default function UseReducerFun() {
  const [objRes, dispatchNumber] = useReducer(reducer, obj)
  return (
    <div>
      <button className='returnButton'><a href="/">点击返回主菜单</a></button>
      <h1>多组件数据共享</h1>
      <Context.Provider value={{ objRes: objRes, dispatch: dispatchNumber }}>
        <ReducerOne />
        <div>-------------------</div>
        <ReducerTwo />
      </Context.Provider>
    </div>
  )
}